<template>
  <el-container>
    <el-container>
      <el-aside width="25%" id="aside">
        <left ref="left" @changeDrawer="changeDrawer"></left>
      </el-aside>
      <el-container class="el_right" id="el_right">
        <el-header>
          <div class="hleft">
            <header-search></header-search>
          </div>
          <div class="hcenter">
            <div v-show="isHome">
              <span class="htitle">排序方式</span>
              <el-select
                v-model="value"
                @change="selectChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="hright">
            <el-button
              style="position:relative;marginRight:10px"
              v-show="loginPage"
              type="primary"
              @click="handleLogin"
              >后台管理
              <span class="sdage" v-if="isLogin && mount > 0">{{
                mount
              }}</span></el-button
            >
            <el-button
              type="primary"
              @click="handleCancellation"
              v-if="getIsLogin"
              >退出</el-button
            >
          </div>
          <div class="htop">
            <div class="hsearch">
              <header-search></header-search>
            </div>
            <div class="huser">
              <div class="title">
                <div class="s-name">{{ userName }}</div>
                <div class="s-qm">{{ signature }}</div>
              </div>
              <div class="imgbox">
                <div class="userphoto">
                  <img :src="imageUrl" alt />
                </div>
              </div>
            </div>
          </div>
          <div class="hbottom">
            <ul>
              <li>
                <router-link to="/home" tag="span">主页</router-link>
              </li>
              <li>
                <span @click="changeDrawer">公告</span>
              </li>
              <li>
                <router-link to="/message" tag="span">留言</router-link>
              </li>
              <li>
                <router-link to="/archive" tag="span">归档</router-link>
              </li>
              <li>
                <router-link to="/musichome" tag="span">音乐</router-link>
              </li>
            </ul>
          </div>
        </el-header>
        <el-main>
          <keep-alive include="archive,message,music">
            <router-view></router-view>
          </keep-alive>
        </el-main>
        <!-- <el-footer>
          <my-audio></my-audio>
        </el-footer> -->
      </el-container>
      <transition name="fade">
        <play v-show="showPlay"></play>
      </transition>
    </el-container>
    <!-- 抽屉：显示公告和归档 -->
    <el-drawer
      :visible.sync="drawer"
      :before-close="handleClose"
      :with-header="false"
    >
      <scroll>
        <div
          class="timelinebox"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <h2>{{ drawertitle }}</h2>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in annount"
              :key="index"
              :timestamp="item.date"
              placement="top"
              type="primary "
            >
              <el-card>
                <p>{{ item.content }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </scroll>
    </el-drawer>
  </el-container>
</template>
<script>
import MyAudio from "../components/audio/MyAudio"
import Play from "../components/play/Play"
import Scroll from "../components/scroll/scroll"

import Left from "../views/Left"
import HeaderSearch from "../views/HeaderSearch"

import { mapGetters } from "vuex"

import request from "../api/request"

export default {
  name: "App",
  data() {
    return {
      imageUrl: "",
      userName: "",
      isHome: true,
      loginPage: true,
      key: "",
      loading: true,
      isLogin: false,
      drawertitle: "公告",
      flag: true,
      drawer: false,
      annount: [], //储存公告的数组
      count: 0, //公告的数量
      showPlay: false, //Play组件的显示和隐藏
      options: [
        {
          value: "1",
          label: "按时间排序",
        },
        {
          value: "2",
          label: "按浏览量排序",
        },
      ],
      value: "1",
    }
  },
  watch: {
    // 检查路径控制后台管理按钮的显示与隐藏
    $route: function(newVal, oldVal) {
      if (newVal.path == "/login" || newVal.path == "/backend") {
        this.loginPage = false
      } else {
        this.loginPage = true
      }
      if (newVal.path.includes("/home")) {
        this.isHome = true
      } else {
        this.isHome = false
      }
    },
  },
  async created() {
    // 音乐播放列表
    const state = JSON.parse(window.localStorage.getItem("musicState"))
    if (state) {
      this.$store.commit("pushlist", state)
    } else {
      this.$store.commit("pushlist", {})
    }

    // token
    const blogToken = JSON.parse(window.localStorage.getItem("blogToken"))
    if (blogToken) {
      let { date, token } = blogToken
      let distance =
        (new Date().getTime() - new Date(date).getTime()) / 1000 / 60 / 60 / 24
      if (distance > 5 && distance < 7) {
        let res = await request({
          url: "/user/token/refresh",
          data: {
            token,
          },
          methods: "post",
        })
        if (res.status) {
          window.localStorage.setItem(
            "blogToken",
            JSON.stringify({ token: res.token, date: new Date() })
          )
          this.$store.commit("saveToken", res.token)
        }
      } else if (distance > 7) {
        window.localStorage.removeItem("blogToken")
        this.$store.commit("saveToken", {})
        this.$store.commit("upDateStaus", false)
      } else {
        this.$store.commit("saveToken", token)
        this.$store.commit("upDateStaus", true)
      }
    }

    // 文章的排序方式
    let sort = window.localStorage.getItem("sort")
    if (sort) {
      this.value = sort
    }
    this.getFile()
    this.$EventBus.$on("changeShowPlay", () => {
      //更改Play组件的显示和隐藏
      this.showPlay = !this.showPlay
    })
  },
  computed: {
    ...mapGetters(["getIsLogin"]),
    mount: function() {
      return this.$store.getters.getReadMount
    },
  },
  mounted() {
    // 事件总线，监听登录状态，$emit 位于LoginPage.vue组件中
    this.$EventBus.$on("changeIsLogin", () => {
      this.isLogin = true
    })

    // // 监听页面刷新
    // window.onresize = function(e) {
    //   console.log(window.innerWidth, window.innerHeight)
    // }
  },
  components: {
    Left,
    HeaderSearch,
    MyAudio,
    Play,
    Scroll,
  },
  methods: {
    // 关闭公告和归档的抽屉
    handleClose(done) {
      done()
      this.loading = true
    },
    // 打开公告栏
    changeDrawer(args) {
      this.annount = []
      this.drawer = true
      this.getAnnount()
    },
    // 获取公告
    async getAnnount() {
      let res = await request({
        url: "/notice/obtain",
        data: {},
        method: "get",
      })
      this.annount = []
      let { data, status, count } = res
      if (status) {
        this.annount = Object.freeze(data)
        this.count = Object.freeze(count)
        this.loading = false
      }
    },
    // 后台管理
    handleLogin() {
      if (this.getIsLogin) {
        this.$router.push("/backend")
      } else {
        this.$router.push("/login")
      }
    },
    // 注销
    handleCancellation() {
      this.$confirm("您确定退出登录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.localStorage.removeItem("blogToken")
          this.$store.commit("upDateStaus", false)
          if (this.$route.path != "/home") {
            this.$router.push("/home")
          }
        })
        .catch(() => {})
    },

    // 更改文章排序方式
    selectChange() {
      window.localStorage.setItem("sort", this.value)
      this.$EventBus.$emit("sort", this.value)
    },

    // 获取博主个人信息
    async getFile() {
      let res = await request({
        url: "/find/file",
        data: { isAdmin: true },
        method: "get",
      })
      this.$store.commit("upDateAdmin", res)
      this.userName = res.userName
      this.imageUrl = res.photo
    },
  },
}
</script>

<style lang="scss" scoped>
@media (min-width: 600px) {
  .el-container {
    height: 100%;
    width: 100%;
    margin: 0px !important;
  }
  .el_right {
    width: 75%;
  }
  .el-header {
    background-color: #dbdada;
    display: flex;
    color: #333;
    display: flex;
    line-height: 60px;
    .hleft {
      flex: 1;
      text-align: left;
    }
    .hcenter {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .hright {
      flex: 1;
      text-align: right;
    }
    .htop {
      display: none;
    }
    .hbottom {
      display: none;
    }
  }

  .el-aside {
    background-color: white;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-main {
    background-color: #eeeeee;
    height: calc(100% - 120px);
    color: #333;
    display: flex;
    padding: 0px;
    justify-content: center;
  }
  .el-footer {
    height: 60px;
    padding: 0px;
  }
  .htitle {
    height: 40px;
    line-height: 40px;
    display: inline-block;
    color: rgb(255, 255, 255);
    background: #409eff;
    padding: 0px 10px;
    margin: 0 10px;
    vertical-align: middle;
    border-radius: 5px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .timelinebox {
    height: 600px;
  }
  .el-drawer {
    h2 {
      margin: 20px;
      font-size: 18px;
    }
  }
  .el-timeline {
    margin: 20px;
    p {
      line-height: 25px;
    }
  }
  .sdage {
    position: absolute;
    top: -10px;
    right: -10px;
    color: white;
    background: red;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
  }
}
@media (max-width: 600px) {
  .el-container {
    box-sizing: border-box;
    overflow: hidden;
    height: 100vh;
    overflow: hidden;
  }
  .el-header {
    height: 5.75rem !important;
  }
  #aside {
    display: none;
  }
  #el_right {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .el-main {
    box-sizing: border-box;
    width: 100vw;
    height: calc(100vh - 5.75rem - 3.125rem);
    overflow: hidden;
    padding: 0px;
    background: white;
  }
  .el-header {
    padding: 0;
    .hleft {
      display: none;
    }
    .hcenter {
      display: none;
    }
    .hright {
      display: none;
    }
    .htop {
      background: white;
      height: 3.25rem;
      display: flex;
      justify-content: space-between;
      .hsearch {
        height: 100%;
        display: flex;
        align-content: center;
        margin: 0.5rem 0.8rem 0.5rem 0.5rem;
      }
      .huser {
        display: flex;
        height: 100%;
        margin-right: 0.5rem;
        .title {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 0.5em;
        }
        .imgbox {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          .userphoto {
            width: 2.5rem;
            height: 2.5rem;
            overflow: hidden;
            border-radius: 0.375rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .hbottom {
      height: 2.5rem;
      background: rgba(226, 225, 225, 0.1);
      color: rgb(184, 179, 179);
      box-sizing: border-box;
      border-top: 0.0625rem solid #ccc;
      border-bottom: 0.0625rem solid #ccc;
      ul {
        height: 2.5rem;
        display: flex;
        list-style: none;
        li {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .el-footer {
    height: 3.125rem !important;
    padding: 0px;
  }
  .htitle {
    height: 40px;
    line-height: 40px;
    display: inline-block;
    color: rgb(255, 255, 255);
    background: #409eff;
    padding: 0px 10px;
    margin: 0 10px;
    vertical-align: middle;
    border-radius: 5px;
  }
  .timelinebox {
    height: 600px;
  }
  /deep/ .el-drawer {
    width: 80% !important;
    h2 {
      margin: 20px;
      font-size: 18px;
    }
  }
  .el-timeline {
    margin: 20px;
    p {
      line-height: 25px;
    }
  }
  .sdage {
    position: absolute;
    top: -10px;
    right: -10px;
    color: white;
    background: red;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.8s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    transform: translate(-100vw, 100vh) scale(0);
  }
}
</style>
<style lang="css">
.el-select {
  width: 135px;
  vertical-align: middle;
}
</style>
